<template>
  <el-container>
    <el-main>
      <el-table
          :data="tableData"
          height="600px"
          style="width: 100%"
      >
        <el-table-column type="expand">
          <template #default="props">
            <p style="text-align: center" >
              总时间: {{ props.row.sumTimerWait}} -
            最长响应时间: {{ props.row.maxTimerWait }} -
            最短响应时间: {{ props.row.minTimerWait }} -
            平均响应时间: {{ props.row.avgTimerWait }} -------- (单位:皮秒)
            </p>
          </template>
        </el-table-column>
        <el-table-column  width="500">
          <template #header>
            <label>SQL语句</label>
            <el-input v-model="search" clearable size="medium" placeholder="请输入SQL语句" />
          </template>
          <template #default="props">
            {{props.row.digestText}}
          </template>
        </el-table-column>
        <el-table-column prop="countStar" width="100px;" label="调用次数"></el-table-column>
        <el-table-column width="130px;" :sortable="$store.state.EventsDigestSort" prop="minTimerWait" label="最短响应时间(皮秒)"></el-table-column>
        <el-table-column width="130px;" :sortable="$store.state.EventsDigestSort" prop="maxTimerWait" label="最长响应时间(皮秒)"></el-table-column>
        <el-table-column width="130px;" :sortable="$store.state.EventsDigestSort" prop="firstSeen" label="初次调用时间"></el-table-column>
        <el-table-column width="130px;" :sortable="$store.state.EventsDigestSort" prop="lastSeen" label="末次调用时间"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import {computed,watchEffect,ref} from 'vue'
import {useStore} from 'vuex'
export default{
  setup(){
    const store = useStore();
    //sql搜索过滤
    let search = ref('');

    //对应数据库下的表
    //const tableData = computed(()=>store.state.selectEventsDigest);
    const tableData = computed(()=>{
      let table = store.state.selectEventsDigest
      if(table!=null){
        //搜索过滤
        return table.filter((data)=>!search||data.digestText.toLowerCase().includes(search.value.toLowerCase()))
      }else{
        return null;
      }
    });
    store.commit('setToggleHead','DB');



    return {
      tableData,
      search
    }
  }
}
</script>

<style scoped>

.el-aside {
  color: var(--el-text-color-primary);
}
</style>